<template>
	<div class="screen_wrap echarts_box">
		<corner></corner>
		<div class="body">
			<title1 title="地表水点位统计"></title1>
			<div class="statistics_wrap">
				<div class="section section1">
					<e-chart :options="option1" style="height:100%"></e-chart>
				</div>
				<div class="section section1">
					<e-chart :options="option2" style="height:100%"></e-chart>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { getSwapData, getSwapCityNum } from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title1 from '../public/title1'
	export default {
		components: {
			corner,
			title1
		},
		data() {
			return {
				option1: null,
				option2: null,
				color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
				data: [],
				data2: [],
				data3: [],
				xData: [],
				total: 0,
				symbolSize: [25, 10],
				barWidth: 25
			}
		},
		mounted() {
			this.initData()
		},
		methods: {
			init2() {
				this.option2 = {
				    title: {
				        text: '水质点位类型分布',
				        left: 'center',
				        top: 20,
				        textStyle: {
				            color: '#ccc',
				            fontSize:'12'
				        }
				    },						
					tooltip: { //提示框组件
						trigger: 'axis',
						formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
						axisPointer: {
							type: 'shadow',
							label: {
								backgroundColor: '#6a7985'
							}
						},
						textStyle: {
							color: '#fff',
							fontStyle: 'normal',
							fontFamily: '微软雅黑',
							fontSize: 12,
						}
					},
					grid: {
						left: '10%',
						right: '10%',
						bottom: '20%',
						top: '30%',
						//	padding:'0 0 10 0',
						containLabel: false,
					},
					legend: {
						show:false,
						//图例组件，颜色和名字
						right: '10%',
						top: '10%',
						itemGap: 16,
						itemWidth: 18,
						itemHeight: 10,
						data: [
						    {
								name: '在线',
								
							},
							{
								name: '不在线',
							}
						],
						textStyle: {
							color: '#f3ffff',
							fontStyle: 'normal',
							fontFamily: '微软雅黑',
							fontSize: 12,
						}
					},
					xAxis: [{
						type: 'category',
						//	boundaryGap: true,//坐标轴两边留白
						data: this.xData,
						axisLabel: { //坐标轴刻度标签的相关设置。
							//		interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
							//	margin:15,
							textStyle: {
								color: '#f3ffff',
								fontStyle: 'normal',
								fontFamily: '微软雅黑',
								fontSize: 12,
							}
						},
						axisTick: { //坐标轴刻度相关设置。
							show: false,
						},
						axisLine: { //坐标轴轴线相关设置
							lineStyle: {
								color: '#fff',
								opacity: 0.2
							}
						},
						splitLine: { //坐标轴在 grid 区域中的分隔线。
							show: false,
						}
					}],
					yAxis: [{
						type: 'value',
						splitNumber: 4,
						axisLabel: {
							textStyle: {
								color: '#f3ffff',
								fontStyle: 'normal',
								fontFamily: '微软雅黑',
								fontSize: 12,
							}
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: ['#ccc'],
								opacity: 0.6,
								type:'dashed'
							}
						}
					}],
					series: [{
							name: '在线',
							type: 'bar',
							data: this.data2,
							barWidth: 15,
							barGap: 0, //柱间距离
							itemStyle: {
								normal: {
									show: true,
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#5768EF'
									}, {
										offset: 1,
										color: '#5768EF'
									}]),
									barBorderRadius: 0,
									borderWidth: 0,
								}
							},
						},
						{
							name: '不在线',
							type: 'bar',
							data: this.data3,
							barWidth: 15,
							barGap: 0, //柱间距离
							itemStyle: {
								normal: {
									show: true,
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#69CBF2'
									}, {
										offset: 1,
										color: '#69CBF2'
									}]),
									barBorderRadius: 0,
									borderWidth: 0,
								}
							},
						}
					]
				}
			},
		    initData() {
				getSwapData().then(res => {
					res.data.data.forEach(item => {
						let onLineNum=item.onLineNum?item.onLineNum:0
						let offLineNum=Number(item.num)-item.onLineNum						
						this.xData.push(item.type)
						this.data2.push(onLineNum)
						this.data3.push(offLineNum)
					})
					// 柱状图初始化
					this.init2()
				})
				getSwapCityNum().then(res => {
					let arr = res.data.data
					for(var i = 0; i < arr.length; i++) {
						this.total += Number(arr[i].num)
						this.data.push({
							value: Number(arr[i].num),
							name: arr[i].type,
							itemStyle: {
								normal: {
									borderWidth: 1,
									shadowBlur: 4,
									borderColor: this.color[i],
									shadowColor: this.color[i]
								}
							}
						}, {
							value: 0.5,
							name: '',
							itemStyle: {
								normal: {
									label: {
										show: false
									},
									labelLine: {
										show: false
									},
									color: 'rgba(0, 0, 0, 0)',
									borderColor: 'rgba(0, 0, 0, 0)',
									borderWidth: 0
								}
							}
						});
					}
					// 饼图初始化
					this.init()
				})
			},

			init() {
				let that = this
				this.option1 = {
					color: this.color,
					title: {
						text: '在线点位水质等级分布',
						left: 'center',
						top: 20,
						textStyle: {
							color: '#ccc',
							fontSize: '12'
						}
					},
					tooltip: {
						show: true,
						formatter: function(params) {
							if(params.name) {
								return params.marker + params.name + ' ' + params.value
							}
						}
					},
					toolbox: {
						show: false
					},
					series: [{
						name: '',
						type: 'pie',
						clockWise: false,
						top: '15%',
						radius: [45, 35],
						hoverAnimation: false,
						itemStyle: {
							normal: {
								label: {
									show: true,
									// color: '#ddd',
									formatter: function(params) {
										var percent = 0;
										percent = ((params.value / that.total) * 100).toFixed(0);
										if(params.name !== '') {
											return params.name + ' ' + percent + '%';
										} else {
											return '';
										}
									},
								},
								labelLine: {
									length: 20,
									length2: 10,
									show: true,
									color: '#00ffff'
								}
							}
						},
						data: this.data
					}]
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.screen_wrap {
		height: 100%;
		position: relative;
		border: 1px solid #12B8E8;
		* {
			box-sizing: border-box;
		}
	}
	
	.body {
		height: 100%;
		display: flex;
		flex-direction: column;
		.statistics_wrap {
			flex: 1;
			display: flex;
		}
		.section {
			flex: 1;
		}
	}
</style>